<template>
  <div >
    <h1>{{ msg }}</h1>
    <h1>学生姓名:{{name}}</h1>
    <h2>学生性别:{{sex}}</h2>
    <h2>学生年龄:{{myAge}}</h2>
    <button @click="changeAge">修改年龄</button>   
</div>
</template>

<script>
    export default {
        name: "StudentInfo",
        data() {
            return {
                msg: "我是一个尚硅谷的学生" ,
                /*name: "张三",
                sex: "男",
                age: 18 */
                myAge: this.age + 1
            }
        },
        methods: {
            changeAge() {
                this.myAge = this.age + 19;
            }
        },
        //简单接收
        // props:['name','sex','age'],
        //接收的同时对数据进行类型限制
       /*  props: {
            name: String,
            sex:String,
            age:Number
        }， */
        // 接收的同时对数据:类型进行限制 + 默认值限制 + 必要性限制
        props: {
            name: {
                 type: String, 
                 //必须传
                 required: true 
            },
            sex: { 
                type: String, 
                default: "男" 
            },
            age: { 
                type: Number, 
                default: 18 
            }
        }
    }
</script>

<style>
    
</style>